<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">

    <title>猜数字游戏</title>

    <style>
      html {
        font-family: sans-serif
      }
      body {
        width: 50%;
        max-width: 800px;
        min-width: 480px;
        margin: 0 auto
      }
      .lastResult {
        color: white;
        padding: 3px
      }
    </style>
  </head>

  <body>
    <h1>猜数字游戏</h1>

    <p>我刚才随机选定了一个100以内的自然数。看你能否在 10 次以内猜中它。每次我都会告诉你所猜的结果是高了还是低了。</p>

    <div class="form">
      <label for="guessField">请猜数: </label>
      <input type="text" id="guessField" class="guessField">
      <input type="submit" value="确定" class="guessSubmit">
    </div>

    <div class="resultParas">
      <p class="guesses"></p>
      <p class="lastResult"></p>
      <p class="lowOrHi"></p>
    </div>

    <script>
      // 开始编写 JavaScript 代码
      var randomNumber = Math.floor(Math.random() * 100) + 1;
   //用数学算法得出1到100之间的随机数，并赋值给第一个变量（randomNumber）
      var guesses = document.querySelector('.guesses');
      var lastResult = document.querySelector('.lastResult');
      var lowOrHi = document.querySelector('.lowOrHi');
 //这三个变量存储着一个引用，分别指向HTML结果段落中的某个元素，用于在代码后面段落中插入值
      var guessSubmit = document.querySelector('.guessSubmit');
      var guessField = document.querySelector('.guessField');
//这两个变量存储对表单文本输入和提交按钮的引用，并用于控制以后提交猜测
      var guessCount = 1;
      var resetButton;
//倒数第二个变量存储一个计数器并初始化为1（跟踪玩家的猜测次数），后一个变量存储对重置按钮的引用
      guessField.focus();
      function checkGuess() {
        var userGuess = Number(guessField.value);
 //声明了一个名为userguess的变量，并将其设置为在文本字段输入的值，最为贴心的是我还为这个值应用了内置的Number（）方法。
          //Number（）方法只为了确保该值是一个数字。
        if(guessCount === 1) {
          guesses.textContent = '上次猜的数: ';
        }
 //这是一个代码块，虽然我觉得它很像函数，但是它不是。条件代码块根据某个条件的真假来选择运行代码。
          //比较测试的是guessCount变量是否等于1，即玩家是不是第一次猜数字；
          //如果是，让guesses段落的文本内容等于“上次猜的数”
        guesses.textContent += userGuess + ' ';
//这行是将userGuess值附加到guesses的末尾并加上一个空格
        if(userGuess === randomNumber) {
          lastResult.textContent = '恭喜你！猜对了！';
          lastResult.style.backgroundColor = 'green';
          lowOrHi.textContent = '';

          setGameOver();//这个if语句中将检查用户的猜测是否等同于懂不的randomNumber值，如果是，显示一个祝贺信息，并清除“高了，低了”信息框内容调用setGameOver()方法
        } else if(guessCount === 10) {
          lastResult.textContent = '!!!GAME OVER!!!';
          lowOrHi.textContent = '';
          setGameOver();//else if（）{}结构检查这个回合是否是玩家的最后一个回合，如果是，显示GAME OVER
        } else {
          lastResult.textContent = '你猜错了！';
          lastResult.style.backgroundColor = 'red';
          if(userGuess < randomNumber) {
            lowOrHi.textContent = '刚才你猜低了！';
          } else if(userGuess > randomNumber) {
            lowOrHi.textContent = '刚才你猜高了！';
 //最后这个else{}前两个比较都不返回true时，会执行这里的代码，在这里会告诉玩家是否猜高或猜低。
          }
        }
        guessCount++;
        guessField.value = '';
        guessField.focus();
      }
//这三行是为下次猜测提交做准备，吧guessCount的值+1，将表单中文本域的值清空。
      guessSubmit.addEventListener('click', checkGuess);//事件,addEventListener()方法包含两个参数
              //监听事件的类型（本例中为“click”），当事件发生时我们想要执行的代码（”checkGuess“）。
              //现在就可以运行，但是它还有一些问题，setGameOver（）函数要定义
      function setGameOver() {
        guessField.disabled = true;
        guessSubmit.disabled = true;
//通过将disable属性设置为true来禁止表单文本输入和按钮。禁止用户在游戏结束后再提交猜测。
        resetButton = document.createElement('button');
        resetButton.textContent = '开始新游戏';
        document.body.appendChild(resetButton);
        resetButton.addEventListener('click', resetGame);
 //新建一个button元素，他的文本是 “Srart new game”并将它添加到HTML的底部
 //最后一行在新按钮上设置一个事件监听器，当他被点击时，一个名为resetGame（）的函数将被调用
      }
      function resetGame() {
        guessCount = 1;
   //将guessCount重置为1
        var resetParas = document.querySelectorAll('.resultParas p');
        for(var i = 0 ; i < resetParas.length ; i++) {
          resetParas[i].textContent = '';
    //清除所有信息段落
        }
        resetButton.parentNode.removeChild(resetButton);
 //删除重置按钮
        guessField.disabled = false;
        guessSubmit.disabled = false;
        guessField.value = '';
        guessField.focus();
//启用表单元素，清空文本域
        lastResult.style.backgroundColor = 'white';
  //删除lastResult的背景颜色
        randomNumber = Math.floor(Math.random() * 100) + 1;
 //生成一个新的随机数
                      //最后这里看的不是很懂=。=
      }
    </script>
  </body>
</html>